<template>
	<div id="edit">
		<div id="header">
			<div style="font-size: 1rem;font-weight: 800;">
				<i class="el-icon-s-data"></i>热度图片列表
			</div>
			<el-button type="text" size="small" @click="goHome">
				返回列表
			</el-button>
			<el-button type="text" size="small" @click="save">
				<i class="el-icon-document-checked"></i>
				保存....
			</el-button>
			<div style="font-size: 0.8rem;">
				类型自定义，获取时指定类型 1=轮播图 2=广告图
			</div>
		</div>
		<div id="main">
			<div :style="{width: '50%',display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'center',border: getBorderStyle()}">
				<el-upload action="#" class="avatar-uploader" :auto-upload="false" list-type="picture"
					:show-file-list="false" :limit="999" :on-change="onChangeFile">
					<el-image v-if="!(data.imgUrl)" :src="pic(data.hotMode.picture)" fit="contain" />
					<el-image v-if="data.imgUrl" :src="data.imgUrl" fit="contain" />
					<p>请点击图片上传新内容</p>
				</el-upload>

			</div>


			<div style="width: 50%;">
				<el-form :model="data.hotMode" status-icon :rules="rules" ref="hotMode" label-width="100px">
					<el-form-item label="图库类型">
						<el-select v-model="data.hotMode.type" placeholder="请选择">
							<el-option v-for="i in type" :key="i.v" :label="i.l" :value="i.v" />
						</el-select>
					</el-form-item>
					<el-form-item label="优先级" prop="hot">
						<el-input type="number" v-model="data.hotMode.hot" />
					</el-form-item>
					<el-form-item label="描述" prop="memo">
						<el-input type="textarea" v-model="data.hotMode.memo" />
					</el-form-item>
				</el-form>
			</div>
		</div>


	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue';
	import api from '../../../api';
	import pic from '../../../api/pic';
	import router from '../../../router';
	import store from '../../../store';
	import {
		ElMessage
	} from 'element-plus';
	
	const type = [{v: 0,l: "-请选择-"}, {v: 1,l: "轮播图"}, {v: 2,l: "广告图"}]
	
	const data = reactive({
		hotMode:{
			id: 0,
			memo: '',
			hot: 0,
			picture: ' ',
			type: 0
		},
		imgUrl:'',
		formData:new FormData()

	})
	const vHot = (rule, value, callback) => {
		if (data.hotMode.hot === '') {
			callback(new Error('优先级不能为空'));
		} else {
			// 验证通过，调用 callback()
			callback();
		}
	}

	const vmemo = (rule, value, callback) => {
		if (data.hotMode.memo === '') {
			callback(new Error('图片描述不可为空'));
		} else {
			// 验证通过，调用 callback()
			callback();
		}
	}

	const rules = {
		hot: [{
			validator: vHot,
			trigger: 'blur'
		}],
		memo: [{
			validator: vmemo,
			trigger: 'blur'
		}]
	}

	// 处理文件选择事件
	const onChangeFile = (file, fileList) => {
		if (data.imgUrl) {
			data.imgUrl = ''
		}
		if (data.formData.has("mypic")) {
			data.formData.delete("mypic")
		}

		//打印出数组
		let length = fileList.length - 1
		//上传formData，并记录url
		if (length >= 0) {
			data.imgUrl = URL.createObjectURL(fileList[length].raw);
			data.formData.append('mypic', fileList[length].raw);
			//保证数组的单一性，可以多次提交
			fileList.length = 0
		}
	}

	const save = () => {
		data.formData.append("id", data.hotMode.id)
		data.formData.append("type", data.hotMode.type)

		if (data.hotMode.type === 0) {
      ElMessage.error("图库类型不能为空")
      return
		}

		data.formData.append("hot", data.hotMode.hot)

		data.formData.append("memo", data.hotMode.memo)

		data.formData.append("picture", data.hotMode.picture)

		console.log("提交修改信息")

		api.postf("api/adm/hot/addOrUpdate", data.formData).then((resp) => {
      if (resp.data.code === 200){
        ElMessage.success(resp.data.msg)
        router.push('/adm/hot/list')
        return
      }
      ElMessage.error(resp.data.msg)
			data.formData = new FormData()
		})
	}

	const getBorderStyle = () => {
			if (data.imgUrl) {
				return 'none';
			}
      if (data.hotMode.picture){
        return 'none';
      }
			return '2px dashed red'
	}
	
	const goHome = () => {
		router.push('/adm/hot/list')
	}
	
	onMounted(()=> {
    let id = store.state.addOrUpdate.hot.id
		data.hotMode = {id: 0,memo: '',hot: 0,picture: '',type: 0}
		if (id <= 0) {
			return;
		}
		api.get(`api/adm/hot/findById/${id}`).then((resp) => {
			data.hotMode = resp.data.data
		})
	})
</script>

<style lang="less" scoped>
	#edit {

		#main {
			margin: 10px;
			display: flex;

			.avatar-uploader {
				width: 80%;
			}
		}

		#header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #b3d8ff;
			padding: 10px 0;

			.el-button {
				font-size: 0.9rem;
				font-weight: 600;
			}
		}
	}
</style>